<template>
  <div class="app-content">
    <div>
      <el-tabs v-model="tabName" class="dk-tabs-spacing">
        <el-tab-pane v-for="(item, key) in tabs" :key="key" :label="item.label" :name="item.name">
          <template v-if="item.name === tabName">
            <component :is="components[item.name]" v-if="item.isCustom" :key="key" />
            <WechatSettingTab v-else :action="item.name" />
          </template>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import WechatSettingSystem from './components/wechat-settings/wechat-setting-system.vue'
import WechatSettingMessage from './components/wechat-settings/wechat-setting-message.vue'
import WechatSettingTab from './components/wechat-settings/wechat-setting-tab.vue'

const tabName = ref('WechatSettingSystem')

// 将组件对象化以便动态引用
const components = {
  WechatSettingSystem,
  WechatSettingMessage
}

const tabs = ref([
  { label: '基础设置', name: 'WechatSettingSystem', isCustom: true },
  { label: '公众号通信', name: 'WechatSettingMessage', isCustom: true },
  // 非自定义
  { label: '支付管理', name: 'pay', action: 'pay' },
  { label: '企业付款到零钱', name: 'transfer', action: 'transfer' },
  { label: '域名设置', name: 'preference', action: 'preference' }
])
</script>

<style lang="scss" scoped></style>
